<template>
  <div class="admini">
    <el-container>
      <p class="moment">当前时间:{{ this.time }}</p>
      <el-header class="sys">EXMS-用户管理系统<span style="font-size: 12px">&nbsp;&nbsp;&nbsp;—By_VM</span></el-header>
      <el-dropdown class="more_" trigger="click" @command="handleCommand" size="small">
        <span class="el-dropdown-link">
          更多功能<i class="el-icon-arrow-down"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="clearbx">清除购保信息</el-dropdown-item>
          <el-dropdown-item command="clearsc">清除审车信息</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <p class="edition">
        V4.3.5【22.12.31】
        <span @click="out" class="outsys">退出系统</span>
      </p>
      <el-container>
        <el-aside width="12%">
          <el-aside width="100%" style="background-color: rgb(238, 241, 246)">
            <el-menu>
              <!-- userinfo -->
              <el-submenu index="1">
                <template slot="title"><i class="el-icon-setting"></i>用户信息</template>
                <router-link :to="{
  name: 'adduser',
  params: { screenWidth: screenWidth },
}">
                  <el-menu-item index="1-1">新建用户信息</el-menu-item>
                </router-link>
                <router-link to="/">
                  <el-menu-item index="1-2">所有用户信息</el-menu-item>
                </router-link>
                <router-link to="/userinfo/jsz">
                  <el-menu-item index="1-3">驾驶证管理</el-menu-item>
                </router-link>
                <!-- <router-link to="/userinfo/newMoto">
                  <el-menu-item index="1-4">销量统计</el-menu-item>
                </router-link> -->
              </el-submenu>

              <!-- userinfo -->
              <el-submenu index="2">
                <template slot="title"><i class="el-icon-menu"></i>其他功能</template>
                <router-link to="/userinfo/slsc">
                  <el-menu-item index="2-1">模拟选牌</el-menu-item>
                </router-link>
                <router-link to="/userinfo/echarts">
                  <el-menu-item index="2-2">数据统计</el-menu-item>
                </router-link>
              </el-submenu>
            </el-menu>
          </el-aside>
        </el-aside>
        <!-- showinfo -->
        <el-main>
          <router-view />
        </el-main>
        <!-- showinfo -->
      </el-container>
      <span style="text-align: center; font-size: 14px; line-height: 40px">
        Copyright © 2020-2023 童家豪爵 All Rights Reserved</span>
    </el-container>
  </div>
</template>
<script>
import moment from "moment";
export default {
  name: "Home",
  data() {
    return {
      value_bx: "",
      value_sc: "",
      time: moment().format("YYYY-MM-DD HH:mm:ss"),
      form: [],
      screenWidth: document.body.clientWidth,
      parentMsg: "a message from parent",
    };
  },
  mounted() {
    // console.log(this.screenWidth)
    setInterval(() => {
      this.time = moment().format("YYYY-MM-DD HH:mm:ss");
    });
  },
  methods: {
    out() {
      this.$confirm("确定退出系统？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        localStorage.removeItem("isLogin");
        localStorage.removeItem("isLogin_");
        localStorage.removeItem("username");
        this.$router.push("/login");
        this.$message({
          type: "success",
          message: "已退出!",
        });
      });
    },

    // 更多功能
    handleCommand(command) {
      // 清除购保信息
      let text = "";
      let url = "";
      if (command == "clearbx") {
        text = "购保";
        url = "/api/clearbx";
      } else if (command == "clearsc") {
        text = "审车";
        url = "/api/clearsc";
      }
      this.$confirm(
        "此操作将清除所有用户的" +
        text +
        "信息, 建议于每年12月31日执行, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let LoginInfo = JSON.parse(localStorage.isLogin).EStoreName;
          this.$axios({
            method: "POST",
            url: url,
            data: {
              LoginInfo: LoginInfo,
            }
          });
          this.$message({
            type: "success",
            message: "清除成功!",
          });
          setTimeout(() => {
            location.reload();
          }, 1000);
        })
        .catch(() => { });
    },
  },

  components: {},
};
</script>
<style scoped lang="less">
@import "../static/index.css";

.outsys {
  cursor: pointer;
  font-weight: bold;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  width: 500px;
  text-align: center;
  line-height: 0px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: left;
  /* line-height: 160px; */
  height: 1050px;
}

body>.el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

// 日期框
.el-date-editor {
  height: 20px;
}

.el-aside[data-v-56b687e3] {
  line-height: 60px;
}

.el-popper[x-placement^="bottom"] {
  margin-top: 36px !important;
}

.edition {
  position: absolute;
  right: 50px;
  color: #464646;
}

.jszc {
  margin-top: 140%;
  position: absolute;
  bottom: 5%;
  left: 4rem;
  line-height: 0px !important;
}

.el-aside[data-v-a83bd3b0] {
  line-height: 0px !important;
}

.jszc_ {
  width: 150px;
}
</style>